import React from 'react'
import Style from './Chart.module.css'

import { v4 } from 'uuid'
import { eventbus } from 'js-guava'

import { SVG } from '@svgdotjs/svg.js'

class SReact extends React.Component {
  ID = `sr-${v4()}`
  svg = null
  rect = { width: 1, height: 1 }

  componentDidMount() {
    eventbus.on('resize', this.resize)
    this.rect = this.getCanvasRect()
    this.svg = SVG().addTo(`#${this.ID}`).size(this.rect.width, this.rect.height)
    this.draw(this.svg)
  }

  componentWillUnmount() {
    eventbus.remove('resize', this.resize)
  }

  resize = () => {
    this.rect = this.getCanvasRect()
    this.svg.size(this.rect.width, this.rect.height)
    this.svg.clear()
    this.draw(this.svg)
  }

  draw(svg) {}

  getCanvasRect() {
    const dom = document.getElementById(this.ID)
    return {
      width: dom.offsetWidth,
      height: dom.offsetHeight
    }
  }

  _x = (v) => {
    return v * (this.rect.width/100)
  }

  _y = (v) => {
    return v * (this.rect.height/100)
  }

  render() {
    const { className } = this.props

    return (
      <div id={this.ID} className={`${Style.React} ${className}`}>
      </div>
    )
  }
}

export default SReact